<template>
	<view>
		<view class="p-10">
			<view class=" flex grid-columns-7 text-center">
				<view v-for="(item,index) in weekList" class="text-grey-5 fs-13">
					{{item.name}}
				</view>
			</view>
			<view class=" flex grid-columns-7 text-center flex-wrap">
				<view v-for="(day,dayIndex) in dayList" :key='dayIndex' :style="`height: ${width}px;`"
					class="p-10 box-sizing">
					<view class="rounded-circle fs-15  w-p-100 h-p-100 flex flex-center" :class="getClass(day)">
						{{day.num}}
					</view>
				</view>
			</view>

			<view class="px-20 py-50">
				<view @click="userSign()" v-if="USERINFO?.sign==false"
					class="py-10   bg-blue-1 text-white rounded-30 fs-15 text-center">签到</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import { reactive, ref } from 'vue';
	import { onLoad } from '@dcloudio/uni-app'
	import { $http, $page, $tool, useStorage } from "@/utils";
	import { useWebConfigStore, useRefs, useUserStore } from "@/stores/index";
	const weekList = ref([
		{ type: '7', name: '日', desc: 'Sunday', children: [] },
		{ type: '1', name: '一', desc: 'Monday', children: [] },
		{ type: '2', name: '二', desc: 'Tuesday', children: [] },
		{ type: '3', name: '三', desc: 'Wednesday', children: [] },
		{ type: '4', name: '四', desc: 'Thursday', children: [] },
		{ type: '5', name: '五', desc: 'Friday', children: [] },
		{ type: '6', name: '六', desc: 'Saturday', children: [] },
	])
	const width = ref(50)
	const dayList = ref([])
	const todayNum = ref(0)
	const sign = ref([])
	const { USERINFO } = useRefs(useUserStore());

	onLoad(() => {
		width.value = (uni.getSystemInfoSync().screenWidth - 20) / 7
		getSign()
		init()
	})

	const getSign = () => {
		$http.get('User/getSign').then(res => {
			sign.value = res.data
		})
	}
	//签到
	const userSign = () => {
		$http.get('User/sign').then(res => {
			$tool.toast('打卡成功')
			setTimeout(() => {
				$page.back()
			},500)
		})
	}
	const getClass = (e) => {
		let classStr = ""
		if (e.num <= todayNum.value && sign.value.indexOf(e.date) == -1) {
			classStr = classStr + 'bg-grey-6 text-grey-1 '
		}

		if (sign.value.indexOf(e.date) != -1) {
			classStr = classStr + 'bg-blue-2 text-white '
		}
		return classStr
	}
	const init = (year = '', month = '') => {
		if (year == '' || month == '') {
			const date = new Date();
			year = date.getFullYear();
			month = date.getMonth() + 1;
		}
		let arr = []; // 存储天数对象的数组
		// 创建对应年、月的第1天
		let week = new Date(year, month - 1, 1).getDay(); // 获取该月1号是周几
		let max = new Date(year, month, 0).getDate(); // 获取该月的最大天数
		let currentDate = new Date(); // 当前日期
		let today = currentDate.getDate(); // 当前的天
		todayNum.value = today
		let currentMonth = currentDate.getMonth() + 1; // 当前的月份
		let currentYear = currentDate.getFullYear(); // 当前的年份

		// 1号之前留空白，填充到对应周几
		for (let i = 0; i < week; i++) {
			let obj = {
				date: '',
				disabled: true, // 空白日期设置为禁用
				isToday: false
			};
			arr.push(obj);
		}

		// 填充该月的天数
		for (let i = 1; i <= max; i++) {
			let isToday = (i === today && month === currentMonth && year === currentYear);
			let obj = {
				date: `${year}-${String(month).padStart(2, '0')}-${String(i).padStart(2, '0')}`,
				num: i,
				disabled: (year < currentYear || (year === currentYear && month < currentMonth) || (year ===
					currentYear && month === currentMonth && i < today)),
				isToday: isToday
			};
			arr.push(obj);
		}

		dayList.value = arr;
	};
</script>

<style>

</style>